<template>
    <div id="lawyer">
        <el-tag>标签一</el-tag>
        <el-tag type="success">标签二</el-tag>
        <el-tag type="info">标签三</el-tag>
        <el-tag type="warning">标签四</el-tag>
        <el-tag type="danger">标签五</el-tag>
        <div v-for="lawyer in lawyers" :key="lawyer.id">
            <el-row>
                <el-col :span="24">
                    <div class="grid-content bg-purple-dark">
                        <p style="font-size: 36px">个人信息</p>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <div class="grid-content bg-purple">Name:{{lawyer.name}}</div>
                </el-col>
                <el-col :span="12">
                    <div class="grid-content bg-purple-light">lawyer_username:{{lawyer.lawyer_username}}</div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <div class="grid-content bg-purple">Gender:{{lawyer.gender}}</div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-light">WorkTime:{{lawyer.worktime}}</div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple">Cases:{{lawyer.cases}}</div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <div class="grid-content bg-purple">Descrip:{{lawyer.descrip}}</div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <div class="grid-content bg-purple">Free:{{lawyer.free}}</div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content bg-purple-light">CasteType:{{lawyer.casetype}}</div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content bg-purple"></div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content bg-purple-light"></div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="4">
                    <div class="grid-content bg-purple"></div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content bg-purple-light"></div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content bg-purple"></div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content bg-purple-light"></div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content bg-purple"></div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content bg-purple-light"></div>
                </el-col>
            </el-row>
        </div>

        <!--表格-->
        <div>
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        prop="order_id"
                        label="订单ID"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="user_name"
                        label="客户姓名"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="lawyer_id"
                        label="律师姓名">
                </el-table-column>
                <el-table-column
                        prop="order_descrip"
                        label="备注">
                </el-table-column>
                <el-table-column
                        prop="order_type"
                        label="订单类型">
                </el-table-column>
                <el-table-column
                        prop="done"
                        label="订单状态">
                </el-table-column>
                <el-table-column
                        prop="start"
                        label="开始时间">
                </el-table-column>
                <el-table-column
                        prop="end"
                        label="结束时间">
                </el-table-column>
            </el-table>
        </div>
<!--end-->
    </div>
</template>

<script>
    import axios from "axios";

    export default {
        created() {

            axios.get("http://localhost:8080/lawyer/findAllLawyer")
                .then(res => {
                  this.lawyers = res.data;
                });
            axios.get("http://localhost:8080/order/findAllOrder")
                .then(res=>this.tableData=res.data);
        },
        name: "Lawyer",
        data() {
            return{
                tableData:[],
                lawyers:[],
            }
        },
    }
</script>

<style scoped>
    .el-row {
      margin-bottom: 20px;
    }

    :last-child {
        margin-bottom: 0;
    }

    .el-col {
        border-radius: 4px;
    }

    .bg-purple-dark {
        background: #99a9bf;
    }

    .bg-purple {
        background: #d3dce6;
    }

    .bg-purple-light {
        background: #e5e9f2;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }

    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
</style>